<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fn1(a, b, c) {
            console.log('this', this); // this {x: 100}
            console.log(a, b, c); //10 20 30
            return 'this is fn1'
        }
        const fn2 = fn1.bind({ x: 100 }, 10, 20, 30)
        const res = fn2()
        console.log(res); //this is fn1


        // 手写bind方法，即写一个自己的插件
        // 由于原生bind方法的参数个数不一定（即除了绑定this的参数外，还有其他可能传入的参数）

        Function.prototype.bind1 = function () {
            // 将参数拆解为数组
            const args = Array.prototype.slice.call(arguments);

            //获取this（数组第一项）
            const t = args.shift()
            // shift方法是将数组的第一项去除并且返回剩余的内容作为新的数组
            // const a = [1, 2, 3, 4]
            // a.shift() // 1
            // console.log(a);//[2,3,4]

            //fn1.bind(...)中的fn1
            const self = this

            //返回一个函数
            return function () {
                return self.apply(t, args)
            }
        }

        function fn1(a, b, c) {
            console.log('this', this); // this {x: 100}
            console.log(a, b, c); //10 20 30
            return 'this is fn1'
        }
        const fn2 = fn1.bind1({ x: 100 }, 10, 20, 30)
        const res = fn2()
        console.log(res); //this is fn1
    </script>
</body>

</html>